<template>
  <div class="header border-bottom">
    <div class="header-nav-tab">
      <span :class="{active: activeIndex ==0 ? true: false}" @click="handleHeaderClick(0)">赛事</span>
      <span :class="{active: activeIndex ==1 ? true: false}" @click="handleHeaderClick(1)">科研</span>
      <span :class="{active: activeIndex ==2 ? true: false}" @click="handleHeaderClick(2)">作品</span>
    </div>
    <div class="header-search">
      <i class="iconfont icon-sousuo"></i>
      <input type="text" placeholder="请输入关键字" v-model="inputValue">
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchHeader',
  data: function () {
    return {
      activeIndex: 0,
      inputValue: ''
    }
  },
  methods: {
    handleHeaderClick: function (index) {
      this.activeIndex = index
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/stylus/varibles.styl"
.header
  font-size 0
  padding-top .15rem
  padding-bottom .2rem
  .header-nav-tab
    display inline-block
    width 40%
    height .6rem
    line-height .6rem
    vertical-align top
    transition .3s
    color #9ba4b4
    font-size 0
    padding-left 0.2rem
    box-sizing border-box
    &>span
      font-size .32rem
      margin 0 0.1rem
    .active
      color $fontColor
      font-weight bold
      font-size .34rem
      border-bottom 2px solid $fontColor
  .header-search
    display inline-block
    width 60%
    height .6rem
    line-height .6rem
    padding-right .3rem
    box-sizing border-box
    vertical-align top
    position relative
    &>input
      font-size .32rem
      color #bbb
      width 100%
      box-sizing border-box
      padding .05rem 0.1rem 0.05rem .6rem
      border-radius .5rem
      background-color #f5f7fa
    &>i
      color #bbb
      position absolute
      top 0
      left 0.14rem
</style>
